<script setup>

import chatInterface_header from './chatInterface_header.vue'
import chatInterface_chatFrame from './chatInterface_chatFrame.vue'
import chatInterface_inputFrame from './chatInterface_inputFrame.vue'
import ChatInterface_sendType from './chatInterface_sendType.vue'
import { right_bottomPage } from '@/stores/page'
import empty from './empty.vue'


</script>

<template>
    <el-container style="position:fixed;top:0">
    <!-- </el-aside> -->

<!-- 主体 -->
  <!-- 头部 -->
   <!-- 好友姓名 -->
    <el-header style="height: 8vh;width:75vw;">
      <chatInterface_header style="width:75vw; height : 8vh"></chatInterface_header>
    </el-header>
      <!-- <button @click="scrollToBottom">滚动到底部</button> -->
    <el-main style="position : fixed;top : 8vh; height: 64.5vh; width:75vw">
      <!-- 聊天框 --> 
       <chatInterface_chatFrame></chatInterface_chatFrame>
    </el-main>
    <el-footer style="padding : 0; position : fixed; bottom : 20%;">
      <div v-if="right_bottomPage === 1">
      <el-container>
        <!-- 发送列表 -->
         <el-header style="height: 4vh">
          <ChatInterface_sendType></ChatInterface_sendType>
         </el-header>
         <!-- 输入框 -->
          <el-main>
            <chatInterface_inputFrame></chatInterface_inputFrame>
          </el-main>
      </el-container>
    </div>
    <div v-else>
      <empty></empty>
    </div>
    </el-footer>
    
</el-container>
</template>

<style scoped>
    @import '../../css/chatInterface.css';
    .scroll-container {
  height: 64.5vh; /* 设置一个固定的高度 */
  overflow: auto; /* 开启滚动 */
}
</style>